<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单引擎数据管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" />
<link rel="stylesheet" href="/static/ui/css/ui.css" />
</head>

<body class="pear-container">
    <div class="layui-card" id="search-btn">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline" id="search-area">
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="form-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md" lay-filter="form-reset" lay-submit>
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="form-table" lay-filter="form-table"></table>
        </div>
    </div>

    <script type="text/html" id="form-toolbar">
			<button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		    </button>
		</script>

    <script type="text/html" id="form-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
				<i class="layui-icon layui-icon-edit"></i>
			</button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
				<i class="layui-icon layui-icon-delete"></i>
			</button>
		</script>
    <script type="text/html" id="approve-status">
        <button class="{{d._status_color}} layui-btn-sm">
            {{d._status_name}}
        </button>
	</script>
    <script src="../config.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/ui/ui.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery', 'common'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
            let req = _req();
            let fid = req.id;
            let uid = req.uid;
            let MODULE_PATH = "./";
            let outData = ['tab', 'grid', 'space', 'tips', 'button', 'note', 'subtraction']
            _get(layui, 'form/editBefore?id=' + fid, res => {
                //console.log(res)
                let cols = [
                    {
                        title: 'ID',
                        field: 'id',
                        width:50,
                        align: 'center'
                    },
                    // {
                    //     title: '用户id',
                    //     field: 'user_id',
                    //     width:80,
                    //     align: 'center'
                    // },
                    
                ];
                if(!uid) {
                    cols.push({
                        title: '用户名',
                        field: 'user_name',
                        width:120,
                        align: 'center'
                    });
                }
                let searchArr = []
                res.formdesign.forEach(d => {
                    if (!outData.includes(d.tags) && d.table) {
                        cols.push({
                            title: d.label,
                            field: d.name,
                            align: 'center'
                        })
                    }
                    if (!outData.includes(d.tags) && d.search) {
                        searchArr.push({
                            title: d.label,
                            field: d.name
                        })
                    }
                })
                cols.push({
                    title: '状态',
                    templet : '#approve-status',
                    align: 'center',
                    width: 150
                })
                cols.push({
                    title: '操作',
                    toolbar: '#form-bar',
                    align: 'center',
                    fixed : 'right',
                    width: 120
                })
                //console.log(searchArr)
                if(searchArr.length > 0) {
                    let str = ''
                    searchArr.forEach(d => {
                        str += `<div class="layui-input-inline">
                            <input type="text" name="${d.field}" placeholder="请输入${d.title}" class="layui-input">
                        </div>`
                    })
                    $('#search-area').html(str)
                }else{
                    $("#search-btn").hide()
                }
                //console.log(cols)
                table.render({
                    elem: '#form-table',
                    url: apiUrl + 'form/listData?fid=' + fid + '&uid=' + uid,
                    headers: getHeader(),
                    parseData: function (rs) {
                        //console.log(res)
                        return {
                            "code": rs.code, //解析接口状态
                            "msg": rs.message, //解析提示文本
                            "count": rs.data.count, //解析数据长度
                            "data": rs.data.list //解析数据列表
                        };
                    },
                    page: true,
                    cols: [cols],
                    skin: 'line',

                    toolbar: '#form-toolbar',
                    defaultToolbar: [{
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter', 'print', 'exports']
                });
            })
            

            

            table.on('tool(form-table)', function (obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                } else if (obj.event === 'view') {
                    window.view(obj);
                }
            });

            table.on('toolbar(form-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                }
            });
            // 监听搜索操作

            form.on('submit(form-query)', function (data) {
                table.reload('form-table', {
                    where: {
                        param: $('form').serialize()
                    },
                    page: {
                        curr: 1
                    }
                })
                return false;
            });
            form.on('submit(form-reset)', function (data) {
                table.reload('form-table', {
                    where: {
                        param: ''
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            })

            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    offset: 'rt',
                    area: ['80%', '100%'],
                    anim: 1,
                    maxmin: true,
                    content: MODULE_PATH + 'data.html?fid=' + fid
                });
            }

            window.edit = function (obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    offset: 'rt',
                    area: ['80%', '100%'],
                    anim: 1,
                    maxmin: true,
                    content: MODULE_PATH + 'data.html?id=' + obj.data.id + '&fid=' + fid
                });
            }
            window.remove = function (obj) {
                layer.confirm('确定要删除', { icon: 3, title: '提示' }, function (index) {
                    layer.close(index);
                    _post(layui, 'form/delData', { id: obj.data.id }, res => {
                        layer.msg('删除成功', { icon: 1, time: 1000 }, () => {
                            obj.del();
                        });
                    }, err => {
                        //layer.msg('删除失败',{icon:2,time:1000});
                    })
                });
            }


            window.refresh = function (param) {
                table.reload('form-table');
            }
        })
    </script>
</body>

</html>